<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <style type="text/css">
        body {font-size: 12px;overflow:hidden;padding: 10px;margin:0;color: #838383}
        .tabWarper{width: 600px;height:370px;overflow: hidden;position: relative;}
        .head{height: 35px;line-height: 35px;position: relative;z-index: 2}
        .head span {width: 62px; height: 28px; line-height: 28px;display: block; float: left;text-align: center;margin-right: 1px;cursor: pointer}
        .head span.def {
            background: url("../../themes/default/images/dialog-title-bg.png") repeat-x;
            border: 1px solid #ccc;
        }
        .head span.act {background: #FFF; border: 1px solid #ccc; border-bottom: 1px solid #FFF}
        .tabContainer{width: 1250px;height:320px;position: relative;top: -6px;}
        .content{width: 588px;height: 320px;float: left; border: 1px solid #ddd;padding: 5px;margin-right: 20px;}
        .content table{margin-top: 5px;position: relative; }
        .content table tr {height: 35px;line-height: 35px;}
        .lable{text-align: center; width:45px;}
        td input{ width: 125px;height: 21px;line-height: 21px; background: #FFF;border: 1px solid #d7d7d7; }
        #url {width: 534px;margin-bottom: 2px;}
        #preview {width: 330px; height: 252px;position: absolute;top: 50px;left: 246px;background: #eee; padding: 5px;overflow: auto}
        /*.start{z-index: 9999; position: absolute;border: 0;width:100px;height:28px;line-height:28px;*/
            /*background: #ddd url("../../themes/default/images/upload.png");top:315px;left:495px; cursor: pointer;*/
        /*}*/
        .start{float:right;width:100px;height:28px;line-height:28px;background: #ddd url("../../themes/default/images/upload.png");border: 0;cursor:pointer}
        .control{z-index: 9999; position: absolute;width:588px;height:36px;line-height:36px;top:315px;left:6px;}
        .align{float:left;height: 36px;}
        .singlelable{background: url(../../themes/default/images/imgLable.png) -21px 2px no-repeat}
        .batchlable{display:block;float:left; width:50px;height:36px;background: url(../../themes/default/images/imgLable.png) -21px 2px no-repeat}
    </style>
    <script type="text/javascript" src="../internal.js"></script>
</head>
<body>
<div class="tabWarper">
    <div id="head" class="head">
        <span name="tab1" onclick="switchTab(this,0)" class="act">网络图片</span>
        <span name="tab2" onclick="switchTab(this,1)" class="def">本地上传</span>
    </div>
    <div id="tabs" class="tabContainer">
        <div id="tab1" class="content">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td class="lable"> 地  址：</td>
                    <td ><input id="url" type="text" value=""/></td>
                </tr>
                <tr style="display:none" id="originalSize"><td>原  始：</td><td></td></tr>
                <tr>
                    <td class="lable">宽  度：</td>
                    <td><input type="text" id="imgWidth"/> px</td>
                </tr>
                <tr>
                    <td class="lable">高  度：</td>
                    <td><input type="text" id="imgHeight"/> px</td>
                </tr>

                <tr>
                    <td class="lable">边 框：</td>
                    <td><input type="text" id="imgBorder"/> px</td>
                </tr>
                <tr>
                    <td class="lable">描  述：</td>
                    <td><input type="text" id="imgTitle"/></td>
                </tr>
                <tr>
                    <td class="lable singlelable"></td>
                    <td id="singleFloat">
                        <img name="none" src="../../themes/default/images/none-c.jpg" alt="默认" title="默认" onclick="imgselect(this)"/>
                        <img name="left" src="../../themes/default/images/left.jpg" alt="左浮动" title="左浮动" onclick="imgselect(this)"/>
                        <img name="right" src="../../themes/default/images/right.jpg" alt="右浮动" title="右浮动" onclick="imgselect(this)"/>
                        <img name="center" src="../../themes/default/images/topbottom.jpg" alt="居中" title="居中" onclick="imgselect(this)"/>
                    </td>
                </tr>
            </table>
            <div id="preview"></div>

        </div>
        <div id="tab2" class="content"></div>
    </div>
    <div id="control" class="control" style="display: none">
        <span class="batchlable"></span>
        <span id="batchFloat"  class="align">
            <img name="none" src="../../themes/default/images/none-c.jpg" alt="默认" title="默认" onclick="imgselect(this)"/>
            <img name="left" src="../../themes/default/images/left.jpg" alt="左浮动" title="左浮动" onclick="imgselect(this)"/>
            <img name="right" src="../../themes/default/images/right.jpg" alt="右浮动" title="右浮动" onclick="imgselect(this)"/>
            <img name="center" src="../../themes/default/images/topbottom.jpg" alt="居中" title="居中" onclick="imgselect(this)"/>
        </span>
        <button id="start" class="start" style="display: none"></button>
    </div>

</div>
<script type="text/javascript" src="tangram.js"></script>

<!--完整的回调函数，有需要的可以完整取用-->
<!--<script type="text/javascript" src="callbacks.js"></script>-->

<script type="text/javascript">
    /*-=-=-=-=-=-=-=全局变量模块-=-=-=-=-=-=-*/
    var imageUrls = [],        //从服务器返回的上传成功图片数组
        imageCount = 0;        //预览框中的图片数量，初始为0
        

    /*-=-=-=-=-=-=-=界面生成模块-=-=-=-=-=-=-*/
    
    function switchTab(obj,index){
        clearFocusClass();
        obj.className = "act";
        g("tabs").style.left = index * (-620) + "px";
        if(obj.getAttribute("name")=="tab2"){
            g("control").style.display = "";
            if(imageCount!=0){
                dialog.buttons[0].setDisabled(true); //切回来时重新置灰按钮
            }
        }else{
            g("control").style.display = "none";
            dialog.buttons[0].setDisabled(false); //切回来时重新点亮按钮
        }
    }
    function clearFocusClass(){
        var heads = g("head").children;
        for(var i= 0,j;j = heads[i++];){
            j.className = "def";
        }
    }
    /**
     * flash初始化配置
     */
    baidu.swf.create({
				id:"flash",
				url:"ImageUploader.swf?r=" + new Date().getTime(),
				width:"588",
				height:"272",
				errorMessage:"Flash插件初始化错误，请更新您的flashplayer版本！",
				wmode:"window",
				ver:"10.0.0",
				// 初始化的参数就是这些，
				vars:{
                    width:588,      //width是flash的宽
					height:272,		//height是flash的高
					gridWidth:115,  // gridWidth是每一个预览图片所占的宽度，应该为width的整除
					gridHeight:120,  // gridHeight是每一个预览图片所占的高度，应该为height的整除
					picWidth:100,	// 单张预览图片的宽度
					picHeight:100,	// 单张预览图片的高度
					uploadDataFieldName:"picdata",	// POST请求中图片数据的key
					picDescFieldName:"pictitle",    // POST请求中图片描述的key
					maxSize:2,	                // 文件的最大体积,单位M
					compressSize:1,               // 上传前如果图片体积超过该值，会先压缩,单位M
					maxNum:32,	                    // 最大上传多少个文件
                    backgroundUrl:"",               //背景图片
                    listBackgroundUrl:"",           //预览图背景
                    buttonUrl:"",                   //按钮背景
					compressLength:680,	            // 能接受的最大边长，超过该值Flash会自动等比压缩
					url:"../../server/upload/php/up.php",                                             // 上传处理页面的url地址
                    fileType:"{\"description\":\"图片\", \"extension\":\"*.gif;*.jpeg;*.png;*jpg\"}"	  //上传文件格式限制

				}
			},"tab2");

	var flashObj = baidu.swf.getMovie("flash");
	var interval = setInterval(function(){
        if(flashObj && flashObj.flashInit){
            clearInterval(interval);
            //console.log("flash完成初始化");
            // 设置回调函数名
            var callback_func_names = [
                "selectFileCallback",	// 选择文件的回调
                "exceedFileCallback",	// 文件超出限制的最大体积时的回调
                "deleteFileCallback",	// 删除文件的回调
                "startUploadCallback",	// 开始上传某个文件时的回调
                "uploadCompleteCallback",	// 某个文件上传完成的回调
                "uploadErrorCallback",	// 某个文件上传失败的回调
                "allCompleteCallback",	// 全部上传完成时的回调
                "changeFlashHeight"		// 改变Flash的高度，mode==1的时候才有用
            ];
            flashObj.setJSFuncName(callback_func_names);
        }
	}, 500);


    /*-=-=-=-=-=-=-=逻辑处理模块-=-=-=-=-=-=-*/
    //-----------------核心流程------------------------------
    var img = editor.selection.getRange().getClosedNode(),oWidth,oHeight;
    if(!img) img = document.createElement("img");
    if(img.src){
        //图片编辑的情况
        showImageInfo();
    }else{
        //粘贴图片地址的情况
        if(document.attachEvent){
            g("url").onpropertychange = function() {
                if(g("url").value) preloadImg();//trace：解决IE下初始提示bug
            };
        } else {
            g("url").addEventListener("input", function() {
                preloadImg();
            }, false);
        }
    }
    //点击确定时的事件处理
    dialog.onok=function(){
        var actionTab = findActionTab();
        if(actionTab == "tab1"){
            return insertSingle();
        }else if(actionTab == "tab2"){
            return insertBatch();
        }

    };
    //----------------------------------------------------


    /**
     * 返回false时不会关闭对话框
     */
    function insertSingle(){
        //未成功加载图片直接返回
        if(!img.src) return;
        var imgObj={src:img.src};
        var width = g("imgWidth").value;
        if(!width) width = oWidth;
        if(!isNum(width)) {
            alert("请输入正确的宽度值！例如：140，200.5");
            g("imgWidth").value="";
            g("imgWidth").focus();
            return false;
        }
        var height = g("imgHeight").value;
        if(!height) height = oHeight;
        if(!isNum(height)) {
            alert("请输入正确的高度值！例如：140，200.5");
            g("imgHeight").value="";
            g("imgHeight").focus();
            return false;
        }
        var border = g("imgBorder").value;
        if(!border && border !=0 && !isNum(border)) {
            alert("请输入正确的边框值！例如：1，2");
            g("imgBorder").value="";
            g("imgBorder").focus();
            return false;
        }
        imgObj.width  = width;
        imgObj.height = height;
        imgObj.border = border ;
        imgObj.title = g("imgTitle").value ||"";
        imgObj.floatStyle = getAlign("singleFloat");
        editor.execCommand("insertImage",imgObj);
        img = null;
    }
    
    /**
     * 返回false时不会关闭对话框
     */
    function insertBatch(){
        if(!imageCount) return;
        if(!imageUrls.length) return;
        var imgObjs = [],
            align = getAlign("batchFloat");

        for(var i=0,ci;ci=imageUrls[i++];){
            var tmpObj = {};
            tmpObj.title = ci.title;
            tmpObj.floatStyle = align;
            //修正显示时候的地址数据
            tmpObj.src = "../server/upload" + ci.url.replace("..","");
            imgObjs.push(tmpObj);
        }
        editor.execCommand("insertImage",imgObjs);
    }

    function findActionTab(){
        var heads = g("head").children;
        for(var i = 0,j;j = heads[i++];){
            var className = j.className;
            if(className =="act"){
                return j.getAttribute("name");
            }
        }
        return "";
    }

    //预加载图片
    function preloadImg() {
        var imgType = new RegExp("/\.(png|gif|jpg|jpeg)$/ig"),
        urlFilter = "";
        var url = g("url").value,pimg,sourceSize,
            preview = g("preview");
        if (!imgType.test(url) && url.indexOf(urlFilter) == -1) {
            preview.innerHTML = "不正确的图片格式或者图片域！";
            return;
        }
        preview.innerHTML = "图片加载中……";

        img.onload = function() {
            oWidth = this.width;
            oHeight = this.height;
            g("originalSize").lastChild.innerHTML = oWidth + "px * " + oHeight + "px </td>";
            g("originalSize").style.display = "";
            scale(this, 330);
            preview.innerHTML="";
            preview.appendChild(img);
        };
        img.onerror = function() {
            preview.innerHTML = "图片加载失败，请检查网络！";
            img = null;
        };
        img.src = url;
    }
    
    //显示图片信息
    function showImageInfo(){
        //获取图片float方式
        var align =  editor.queryCommandValue('imagefloat');
        replaceImg(align);
        g("url").value = img.src.replace("&amp;", "&");
        g("imgWidth").value = img.width;
        g("imgHeight").value = img.height;
        g("imgBorder").value = img.getAttribute("border")||0;
        g("imgTitle").value = img.title;
        g("originalSize").lastChild.innerHTML = img.width + "px * " + img.height + "px </td>";
        g("originalSize").style.display = "";
        var tmp = img.cloneNode(true);
        tmp.width = img.width;
        tmp.height = img.height;
        scale(tmp, 330);
        g("preview").innerHTML='<img src="'+tmp.src+ '" width="'+tmp.width+'" height="' + tmp.height + '" border="' + img.style.border +'" />';
    }
    //更改float的提示图标
    function replaceImg(str){
        var imgs = g("singleFloat").children;
        for(var i=0,j;j = imgs[i++];){
            imgs[0].src=imgs[0].src.replace("-c.jpg",".jpg")
        }
        for(var i=0,j;j = imgs[i++];){
            if(j.getAttribute("name") == str){
                j.src = j.src.replace(".jpg","-c.jpg");
                break;
            }
        }
    }

    /*-=-=-=-=-=-=-=批量上传控制模块-=-=-=-=-=-=-*/
     function upload(){
		flashObj.call("upload");
         g("start").style.display ="none";
	 }
    /**
	 * 选择文件后的回调函数
	 * @param selectFiles
	 */
    function selectFileCallback(selectFiles){
		//if(console)console.log("开始选择文件：");
        imageCount = selectFiles.length;
        g("start").style.display ="";
        g("start").onclick = upload;
        dialog.buttons[0].setDisabled(true); //初始化时置灰确定按钮

	}
    /**
	 * 单个文件上传完成的回调函数
	 * @param	Object/String	服务端返回啥，参数就是啥
	 */
	function uploadCompleteCallback(data){
        //debugger
		//if(console)console.log("上传成功", data);
        var info = eval("(" + data.info + ")");
        info && imageUrls.push(info);
	}

	//全部上传完成的回调函数
    function allCompleteCallback(){
		//console.log("全部上传成功");
        dialog.buttons[0].setDisabled(false); //上传完毕后点亮按钮
	}
    /**
     * 删除文件后的回调函数
     * @param	Array
     */
    function deleteFileCallback(delFiles){
        // 数组里单个元素为Object，{index:在多图上传的索引号, name:文件名, size:文件大小}
        // 其中size单位为Byte
        imageCount = imageCount - delFiles.length;
        if(imageCount ==0){
            g("start").style.display = "none";
            dialog.buttons[0].setDisabled(false); //上传完毕后点亮按钮
        }
    }


    /*-=-=-=-=-=-=-=公共方法模块-=-=-=-=-=-=-*/
     function g(id){
        return document.getElementById(id);
     }
     function isNum(n){
        return /^[1-9]+[.]?\d*$/g.test(n);
     }
     /**
      * 获取csstext中的某个样式属性
      * @param cssText
      * @param style
      */
     function getStyleFromCssText(cssText, style) {
        var reg = new RegExp(style + ":\\s*((\\w)*)", "ig");
        var arr = reg.exec(cssText);
        return arr ? arr[1] : "";
     }
     /**
      * 等比例缩放图片
      * @param img
      * @param max
      */
     function scale( img, max ) {
         var width = 0,height = 0,percent;
         img.sWidth = img.width;
         img.sHeight = img.height;
         if ( img.width > max || img.height > max ) {
             if ( img.width >= img.height ) {
                 if ( width = img.width - max ) {
                     percent = (width / img.width).toFixed( 2 );
                     img.height = img.height - img.height * percent;
                     img.width = max;
                 }
             } else {
                 if ( height = img.height - max ) {
                     percent = (height / img.height).toFixed( 2 );
                     img.width = img.width - img.width * percent;
                     img.height = max;
                 }
             }
         }
     }
    function imgselect(simg){
        var childs = simg.parentNode.children;
        for(var i=0,child;child = childs[i++];){
            if(/img/ig.test(child.tagName)){
                child.src = child.src.replace("-c.jpg",".jpg");
            }
        }
        simg.src = simg.src.replace(".jpg","-c.jpg");
    }
    //获取id下选中图片的name
    function getAlign(id){
        var imgs = g(id).children;
        for(var i = 0,img;img = imgs[i++];){
            if(img.src.indexOf("-")!=-1){
                break;
            }
        }
        return i != imgs.length + 1 ? img.name : 'none';
    }
</script>
</body>
</html>